<template>
  <van-config-provider :theme-vars="themeVars">
    <van-nav-bar v-if="isShowBar" :border="false">
      <template #left>
        <van-icon name="arrow-left" size="20px" color="#FF5E00" @click="back" :style="{fontWeight: 'bold'}" />
      </template>
      <template #right v-if="btns.length > 0">
        <van-icon v-for="btn of btns" :name="btn.icon" size="20px" color="#FF5E00" @click="handlemuen(btn)" :style="{fontWeight: 'bold'}" />
      </template>
    </van-nav-bar>
    <div class="container">
        <router-view></router-view>
    </div>
  </van-config-provider>
</template>

<script setup lang="ts">
import { onMounted, ref, watch  } from 'vue'
import { useRouter } from 'vue-router';
const btns: any = ref([])
const isShowBar = ref(false)
const themeVars = {
  buttonPrimaryBorderColor: '#FF5E00',
  buttonPrimaryBackgroundColor: '#FF5E00',
  buttonDefaultHeight: '50px',
  buttonNormalFontSize: '20px',
  tabbarHeight: '60px',
  searchContentBackgroundColor: '#F3F3F3',
  navBarHeight: '30px',
  stepperButtonRoundThemeColor: '#FFFFFF',
  stepperButtonIconColor: '#6D3805',
  tabActiveTextColor: '#FF5E00',
  tabTextColor: '#804F1E',
  tabsLineHeight: '56px',
  tabsBottomBarWidth: '45%',
  tabsBottomBarColor: '#FF5E00',
  stepFinishTextColor: 'rgb(94, 196, 1)'
}
const router = useRouter()
router.beforeEach((to,form, next)=>{
  isShowBar.value = router.options.routes.filter((v: any) => {return v.path === to.path}).length === 1 ? false : true;
  (document as any).title = to.meta.title
  btns.value = to.meta.btns || []
  console.log(to.meta.btns)
  next()
})

const back = () => {
  router.back()
}

const handlemuen = (item: any) => {
  if('url' in item) {
    router.push(item.url)
  }
}

onMounted (()=>{
  document.addEventListener('touchstart',function (event) {
    if(event.touches.length>1){
      event.preventDefault();
    }
  });
  var lastTouchEnd=0;
  document.addEventListener('touchend',function (event) {
    var now=(new Date()).getTime();
    if(now-lastTouchEnd<=300){
      event.preventDefault();
    }
    lastTouchEnd=now;
  },false);
  document.addEventListener('gesturestart', function (event) {
    event.preventDefault();
  });
})

</script>

<style lang="less">
@font-face
{
    font-family: Klarna Text;
    src: url('https://static.figma.com/webfont/1/Inter-Regular.woff2?v=3.10');
}
@font-face
{
    font-family: Klarna Headline;
    src: url('./assets/klarnaheadline-bold.otf');
}
body {
  background: #fff;
}

#app {
  font-family: Klarna Text, Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  .container {
    margin: auto;
    overflow: hidden;
    background: #fff;
  }
  .van-field {
    background: #F3F3F3;
    border-radius: 5px;
    .van-field__control {
      height: 28px;
    }
  }
  .van-search {
    .van-field__left-icon {
      align-items: center;
      display: flex;
      .van-icon-search {
        font-size: 18px;
        font-weight: bold;
        color: rgba(109, 56, 5, 0.57);;
      }
    }
    .van-search__content {
      border-radius: 5px;
    }
    .van-field {
        .van-field__control {
            height: 38px;
        }
    }
  }
  .van-nav-bar {
    .van-nav-bar__left,.van-nav-bar__right {
      align-items: flex-end;
    }
  }
  .van-button__text {
    letter-spacing: -0.41px;
  }
  ::-webkit-input-placeholder {
    font-size: 16px;
    color: #AC8E71;
  }
}
@media screen and (min-width:640px) {
  .container {
    max-width: 480px;
    .van-tabbar {
      max-width: 480px;
      left: 50%;
      margin-left: -240px;
    }
  }
}
</style>
